<template>
  <div>
    <el-tabs v-model="activeProject" @tab-click="switchProject" style="padding-top: 10px">
      <el-tab-pane v-for="(item,index) in runningList"  :label="item.name" :name="index+''" :key="index" :lazy="true">
        <el-row>
          <el-col :span="12" >
            <DepthChart :platform="item.platform" :runningId="item.runningId"></DepthChart>
          </el-col>
          <el-col :span="12">
            <el-switch
              style="display: block"
              v-model="value2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="成本监控"
              inactive-text="资金监控">
            </el-switch>
            <AvgPrice v-if="value2" :platform="item.platform" :runningId="item.runningId" style="margin-top: 10px" ></AvgPrice>
            <UsdtChart v-else :platform="item.platform" :runningId="item.runningId" style="margin-top: 10px"></UsdtChart>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="padding-bottom: 30px">
            <div>
              <el-tabs type="border-card"  v-model="activeName">
                <el-tab-pane label="账户盈亏" name="1">
                  <AccountInfo :platform="item.platform" :runningId="item.runningId"></AccountInfo>
                </el-tab-pane>
                <el-tab-pane label="K线机器人" name="2">
                  <KlineRobot :platform="item.platform" :runningId="item.runningId">
                  </KlineRobot>
                </el-tab-pane>
                <el-tab-pane label="策略下单" name="3">
                  <OrderAssistant :platform="item.platform" :runningId="item.runningId"></OrderAssistant>
                </el-tab-pane>
                <el-tab-pane label="账户信息" name="4">
                  <ReportHistory :platform="item.platform" :runningId="item.runningId">
                  </ReportHistory>
                </el-tab-pane>
                <el-tab-pane label="挂单管理" name="5">
                  <OrderManager :platform="item.platform" :runningId="item.runningId"></OrderManager>
                </el-tab-pane>
                <el-tab-pane label="成交历史" name="6">
                  <OrderHistory :platform="item.platform" :runningId="item.runningId"></OrderHistory>
                </el-tab-pane>
                <el-tab-pane label="报警规则" name="7">
                  <AlertRule :platform="item.platform" :runningId="item.runningId"></AlertRule>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import Vue from 'vue'
import {getStrategy} from "@/api/platform/strategy";
import KlineRobot from "./KlineRobot"
import AccountInfo from "./AccountInfo"
import DepthChart from "./DepthChart"
import AvgPrice from "./AvgPrice"
import OrderAssistant from "./OrderAssistant"
import ReportHistory from "./ReportHistory"
import OrderManager from "./OrderManager"
import OrderHistory from "./OrderHistory"
import AlertRule from "./AlertRule"
import UsdtChart from "./UsdtChart"

import {
  queryByIds
} from "@/api/platform/running";


const RobotControl = Vue.component('RobotControl', function (resolve, reject) {
  const strategyId = 3
  getStrategy(strategyId).then(response => {
    resolve(response.data.templates)
  });
})

export default {
  data() {
    return {
      activeName: '1',
      activeProject: '0',
      platform: null,
      runningIds: [],
      projectId: null,
      runningList: [],
      runningTotal: 0,
      value2:true
    }
  },
  components: {
    KlineRobot,
    AccountInfo,
    DepthChart,
    AvgPrice,
    OrderAssistant,
    ReportHistory,
    OrderManager,
    OrderHistory,
    AlertRule,
    UsdtChart
  },
  created() {
    this.platform = this.$route.query['description']
    this.projectId = this.$route.query['projectId']
    this.getListRunning(this.$route.query['runningIds'])
  },

  methods: {
    switchProject(tab, event) {
      console.log(tab, event);
    },
    getListRunning(ids) {
      queryByIds(this.$qs.stringify({runningIds:ids}, { arrayFormat: 'repeat' })).then(response => {
        this.runningList = response.data;
      });
    }
  }
}
</script>
<style>

</style>
